<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-04-27 14:07:01
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-05-05 09:43:29
 * @FilePath: \imedia_crm-branch_v5.0.1_0518\src\allocation\resourceManage\membership\components\c-membership-form.vue
 * @Description: 数字区间输入框
-->
<template>
  <div class="el-input el-input-group " 
  :class="$slots.append?'el-input-group--append':''">
    <div class="el-input__inner mount-range">
      <input :disabled="disabled" @blur="onStart($event)" v-model="start" autocomplete="off" type="text" class="flex-1" placeholder="请输入起始值"></input>
      <div class="mr-lg ml-lg">至</div>
      <input :disabled="disabled" @blur="onEnd($event)" v-model="end" type="text" class="flex-1" placeholder="请输入结束值"></input>
    </div>
    <div v-if="$slots.append" class="el-input-group__append">
      <slot name="append"/>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value: {
      handler(newValue) {
        if (newValue[0] && newValue[1]) {
          this.start = newValue[0];
          this.end = newValue[1];
        } else {
          this.$set(this, "start", "");
          this.$set(this, "end", "");
        }
      },
      immediate: true,
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      start: "",
      end: "",
    };
  },
  methods: {
    onStart(event) {
      if (isNaN(event.currentTarget.value * 1)) {
        this.onEmpty();
        this.$message.warning("起始区间请输入数字");
        return;
      }
      this.start = event.currentTarget.value * 1;
      this.onEmit();
    },
    onEnd(event) {
      if (!this.start) {
        this.onEmpty();
        this.$message.warning("请先输入起始内容");
        return;
      }
      if (isNaN(event.currentTarget.value * 1)) {
        this.onEmpty();
        this.$message.warning("结束内容请输入数字");
        return;
      }

      this.end = event.currentTarget.value * 1;
      this.onEmit();
    },
    onEmit() {
      if (this.start && this.end) {
        if (this.end * 1 <= this.start * 1) {
          this.onEmpty();
          this.$message.warning("结束内容必须大于起始内容");
          return;
        }
        this.$emit("change", [this.start, this.end]);
        console.log(1);
      }
    },
    onEmpty() {
      this.$emit("change", []);
    },
  },
};
</script>
<style scoped lang="scss">
.mount-range {
  display: flex !important;
  align-items: center !important;
  input {
    border: none !important;
    background: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #606266 !important;
    text-align: center !important;
    width: 100%;
  }
  input::-webkit-input-placeholder {
    color: #aab2bd !important;
    font-size: 14px !important;
  }
}
</style>
